import QtQuick
import QtQuick.Controls
import QtQuick.Dialogs

ListView {
    // id:roleManageContent
    // property var thisTheme: p_theme.defaultTheme[p_theme.current]
    // property double fontSize:11
    // property int headerCurrent: 0
    // property int current: -1
    // width:parent.width
    // height: parent.height
    // property var optBtnData: [
    //     {name:"编辑",type:"edit"},
    //     {name:"删除",type:"delete"},
    // ]
    // function setContentModel(){
    //     content.height=0
    //     contentModel.clear()
    //     var callBack=res=>{
    //         console.log(JSON.stringify(res))
    //         content.height=res.length*80+20
    //         contentModel.append(res)
    //     }
    //     p_hotelRes.getRoleList({callBack:callBack})
    // }

    // Component.onCompleted: {
    //      setContentModel()
    // }
    id:musicPlayListDetail
    PlayerListLabel{
        id:thisPlayListLabel
        visible: false
    }
    property var thisTheme: p_theme.defaultTheme[p_theme.current]
    property var playListInfo: null
    property int fontSize: 11
    width:parent.width
    height: parent.height

    onPlayListInfoChanged: {
        headerItem.id=playListInfo.id
        headerItem.nameText=playListInfo.name
        headerItem.coverImg=playListInfo.coverImg
        headerItem.descriptionText=playListInfo.description
    }
    function setContentModel(){
        contentModel.clear()
        var callBack=res=>{
            console.log(JSON.stringify(res))
            contentModel.append(res)
        }
        p_hotelRes.getRoleList({callBack:callBack})
    }

    Component.onCompleted: {
         setContentModel()
    }
    function setHeight(children,spacing){
        var h=0;
        for(var i=0;i<children.length;i++)
        {
            if(children[i] instanceof Text){
                h+=children[i].contentHeight
            }else{
                h+=children[i].height
            }
        }
        return h+(children.length-1)*spacing
    }

    header: Item{
        id:header
        property string id: ""
        property string nameText: "歌单名"
        property string coverImg: "qrc:/Images/user.jpg"
        property string descriptionText: "歌单信息"
        width:parent.width-60
        height:children[0].height+50
        anchors.horizontalCenter: parent.horizontalCenter
        Column{
            width:parent.width
            height:setHeight(children,spacing)
            anchors.top: parent.top
            anchors.topMargin: 30
            spacing: 15
            Row{
                width:parent.width
                height: 50
                spacing: 15
                ToolTipButton{
                    width: parent.height
                    height: width
                    source:"qrc:/Images/guestManage.svg"
                    hoverdColor: "#1F"+thisTheme.subBackgroundColor
                    color:"#00000000"
                    iconColor:"#FF"+thisTheme.subBackgroundColor
                    onClicked: {
                        thisPlayListLabel.visible=!thisPlayListLabel.visible
                    }
                }
            }
            Row{
                width: parent.width-40
                height: 30
                anchors.horizontalCenter: parent.horizontalCenter
                spacing:10
                Text{
                    width:parent.width*0.3-40
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"角色编号"
                    color:thisTheme.fontColor
                }
                Text{
                    width:parent.width*0.3
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"角色名称"
                    color:thisTheme.fontColor
                }
                Text{
                    width:parent.width*0.4
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"操作"
                    color:thisTheme.fontColor
                }
            }
        }
    }
    model:ListModel{
        id:contentModel
    }

    delegate: Rectangle{
        width:musicPlayListDetail.width-80
        height:80
        onParentChanged: {
            if(parent!=null){
                anchors.horizontalCenter=parent.horizontalCenter
            }
        }
        Row{
            width: parent.width-20
            height: parent.height-20
            anchors.centerIn: parent
            spacing:10
            Text{
                width:parent.width*0.3-40
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.weight: 2
                font.pointSize: musicPlayListDetail.fontSize
                elide: Text.ElideRight
                text:roleId
                color:thisTheme.fontColor
            }
            Text{
                width:parent.width*0.3
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.weight: 2
                font.pointSize: musicPlayListDetail.fontSize
                elide: Text.ElideRight
                text:roleName
                color:thisTheme.fontColor
            }
            Row{
                spacing: 5
                Button{
                    text:"修改"
                    onClicked: {
                         thisPlayListLabel.visible=!thisPlayListLabel.visible
                        console.log("modify roleId :",roleId)
                    }
                }
                Button{
                    text:"删除"
                    onClicked: {

                        console.log("delete roleId :",roleId)
                        alertDialog.open()
                    }
                }
            }
        }
    }
    MessageDialog {
        id:alertDialog
        text: "The document has been modified."
        informativeText: "Do you want to save your changes?"
        buttons: MessageDialog.Ok | MessageDialog.Cancel
        modality: Qt.WindowModal
        onAccepted: document.save()
    }


    // Rectangle{
    //     id:rectRow

    //     width: parent.width*.9
    //     height: 20
    //     anchors.leftMargin: parent.width*0.2
    //     anchors.horizontalCenter: parent.horizontalCenter
    //     radius:10
    //     Row{
    //         id:header
    //         spacing: 10
    //         width: parent.width
    //         height: 20
    //         anchors.horizontalCenter: parent.horizontalCenter
    //         anchors.leftMargin: parent.width*0.2
    //         anchors.centerIn:parent

    //         Text{

    //             width: parent.width*0.2
    //             text:"角色编号"
    //             color:thisTheme.fontColor
    //         }
    //         Text{
    //             width: parent.width*0.2
    //             text:"角色名称"
    //             color:thisTheme.fontColor
    //         }
    //         Text{
    //             width: parent.width*0.2

    //             text:"操作"
    //             color:thisTheme.fontColor
    //         }
    //     }
    // }


    // Rectangle{
    //     id:content
    //     width:parent.width*.9
    //     height: 0
    //     anchors.top: rectRow.bottom
    //     anchors.topMargin: 10
    //     anchors.left: roleManageContent.left
    //     anchors.horizontalCenter: parent.horizontalCenter
    //     radius:10

    //     Column{
    //         id:columnContent
    //         topPadding: 10
    //         anchors.horizontalCenter: parent.horizontalCenter
    //         Repeater{
    //             model:ListModel{
    //                 id:contentModel
    //             }
    //             delegate:contentDelegate
    //         }
    //     }
    //     Component{
    //         id:contentDelegate
    //         Rectangle{
    //             property bool isHoverd: false
    //             width:content.width-20
    //             height: 80

    //             radius: 10
    //             color:if(roleManageContent.current===index) return "2F"+thisTheme.subBackgroundColor
    //             else if(isHoverd) return "1F"+thisTheme.subBackgroundColor
    //             else return "#00000000"
    //             Row{
    //                 width: parent.width-20
    //                 height: parent.height-20
    //                 anchors.centerIn:parent
    //                 spacing: 10
    //                 Text{
    //                     width: parent.width*0.2
    //                     anchors.verticalCenter: parent.verticalCenter
    //                     horizontalAlignment: Text.AlignHCenter
    //                     font.weight: 2
    //                     font.pointSize: roleManageContent.fontSize
    //                     elide: Text.ElideRight
    //                     text:roleId
    //                     color:thisTheme.fontColor
    //                 }
    //                 Text{
    //                     width: parent.width*0.2
    //                     anchors.verticalCenter: parent.verticalCenter
    //                     horizontalAlignment: Text.AlignLeft
    //                     font.weight: 2
    //                     font.pointSize: roleManageContent.fontSize
    //                     elide: Text.ElideRight
    //                     text:roleName
    //                     color:thisTheme.fontColor
    //                 }
    //                 Row{
    //                     id:opt
    //                      spacing: 10
    //                     height:20
    //                     anchors.horizontalCenter: parent.horizontalCenter
    //                     Repeater{

    //                         model:ListModel{}
    //                         delegate:optDelegate
    //                         Component.onCompleted: {
    //                             model.append(roleManageContent.optBtnData)
    //                         }
    //                     }
    //                     Component{
    //                         id:optDelegate

    //                         Text{
    //                             property bool isHoverd: false
    //                             font.bold: isHoverd||roleManageContent.headerCurrent===index
    //                             font.pointSize: roleManageContent.fontSize
    //                             text:name
    //                             color:"#C3C3C3"
    //                             MouseArea{
    //                                 anchors.fill: parent
    //                                 hoverEnabled: true
    //                                 onClicked: {
    //                                     roleManageContent.headerCurrent=index
    //                                 }
    //                                 onEntered: {
    //                                     parent.isHoverd=true
    //                                 }
    //                                 onExited: {
    //                                     parent.isHoverd=false
    //                                 }
    //                             }
    //                         }
    //                     }
    //                 }
    //             }

    //             MouseArea{
    //                 anchors.fill: parent
    //                 hoverEnabled: true
    //                 onClicked: {
    //                     roleManageContent.headerCurrent=index
    //                 }
    //                 onEntered: {
    //                     parent.isHoverd=true
    //                 }
    //                 onExited: {
    //                     parent.isHoverd=false
    //                 }
    //             }
    //         }
    //     }
    // }
}
